<template>
  <view class="schedule-container">
    <view class="header">
      <!-- <text class="header-title">日程安排</text> -->
      <view class="header-actions">
        <view class="action-btn" @tap="addSchedule">
          <text class="action-text">+ 添加</text>
        </view>
      </view>
    </view>
    
    <view class="content">
      <!-- 日程分类标签 -->
      <view class="category-tabs">
        <view class="tab" :class="{active: activeTab === 'today'}" @tap="switchTab('today')">今天</view>
        <view class="tab" :class="{active: activeTab === 'tomorrow'}" @tap="switchTab('tomorrow')">明天</view>
        <view class="tab" :class="{active: activeTab === 'week'}" @tap="switchTab('week')">本周</view>
        <view class="tab" :class="{active: activeTab === 'month'}" @tap="switchTab('month')">本月</view>
      </view>
      
      <!-- 日程列表 -->
      <view class="schedule-list">
        <view v-if="currentSchedule.length === 0" class="empty-state">
          <text class="empty-icon">📅</text>
          <text class="empty-text">暂无日程安排</text>
        </view>
        
        <view v-for="(event, index) in currentSchedule" :key="index" class="event-item" @tap="openEventDetail(event)">
          <view class="event-time">
            <text class="event-hour">{{ event.time }}</text>
          </view>
          <view class="event-content">
            <text class="event-title">{{ event.title }}</text>
            <text class="event-location">{{ event.location }}</text>
          </view>
          <view class="event-status" :class="event.status">
            <text class="status-dot"></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加日程弹窗 -->
    <view class="modal-overlay" v-if="showAddModal" @tap="closeAddModal">
      <view class="modal-content" @tap.stop>
        <view class="modal-header">
          <text class="modal-title">添加日程</text>
          <text class="modal-close" @tap="closeAddModal">✕</text>
        </view>
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">标题</text>
            <input type="text" class="form-input" v-model="newSchedule.title" placeholder="请输入日程标题"/>
          </view>
          <view class="form-item">
            <text class="form-label">时间</text>
            <input type="text" class="form-input" v-model="newSchedule.time" placeholder="如：14:30"/>
          </view>
          <view class="form-item">
            <text class="form-label">地点</text>
            <input type="text" class="form-input" v-model="newSchedule.location" placeholder="请输入地点"/>
          </view>
          <view class="form-item">
            <text class="form-label">日期</text>
            <picker class="date-picker" @change="onDateChange" :value="dateIndex" :range="dateOptions">
              <text class="picker-text">{{ dateOptions[dateIndex] }}</text>
            </picker>
          </view>
        </view>
        <view class="modal-footer">
          <button class="btn-cancel" @tap="closeAddModal">取消</button>
          <button class="btn-confirm" @tap="saveSchedule">确认</button>
        </view>
      </view>
    </view>
    
    <!-- 底部导航 -->
    <view class="footer-nav">
      <view class="nav-item" @tap="openIndex">
        <text class="nav-icon">🏠</text>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-item active">
        <text class="nav-icon">📅</text>
        <text class="nav-text">日程</text>
      </view>
      <view class="nav-item" @tap="openNotes">
        <text class="nav-icon">📝</text>
        <text class="nav-text">笔记</text>
      </view>
      <view class="nav-item" @tap="navigateToProfile">
        <text class="nav-icon">👤</text>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'today',
      showAddModal: false,
      newSchedule: {
        title: '',
        time: '',
        location: '',
        status: 'upcoming'
      },
      dateOptions: ['今天', '明天', '本周', '本月'],
      dateIndex: 0,
      schedules: {
        today: [
          { time: '10:00', title: '产品设计评审', location: '线上会议', status: 'upcoming' },
          { time: '14:30', title: '前端开发讨论', location: '会议室A', status: 'upcoming' },
          { time: '16:00', title: '周报提交', location: '工位', status: 'completed' }
        ],
        tomorrow: [
          { time: '09:30', title: '项目启动会', location: '大会议室', status: 'upcoming' },
          { time: '15:00', title: '客户访谈', location: '线上', status: 'upcoming' }
        ],
        week: [
          { time: '13:00', title: '团队聚餐', location: '餐厅B', status: 'upcoming' },
          { time: '10:00', title: '代码评审', location: '线上会议', status: 'upcoming' },
          { time: '16:30', title: '进度汇报', location: '会议室C', status: 'upcoming' }
        ],
        month: [
          { time: '09:00', title: '月度总结会议', location: '大会议室', status: 'upcoming' },
          { time: '14:00', title: '产品规划讨论', location: '会议室A', status: 'upcoming' },
          { time: '11:00', title: '技术分享会', location: '培训室', status: 'upcoming' }
        ]
      }
    };
  },
  computed: {
    currentSchedule() {
      return this.schedules[this.activeTab] || [];
    }
  },
  onLoad() {
    // 页面加载时的逻辑
  },
  methods: {
    // 切换分类标签
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    // 打开添加日程弹窗
    addSchedule() {
      this.showAddModal = true;
      // 重置表单
      this.newSchedule = {
        title: '',
        time: '',
        location: '',
        status: 'upcoming'
      };
      this.dateIndex = 0;
    },
    
    // 关闭添加日程弹窗
    closeAddModal() {
      this.showAddModal = false;
    },
    
    // 日期选择变化
    onDateChange(e) {
      this.dateIndex = e.detail.value;
    },
    
    // 保存日程
    saveSchedule() {
      if (!this.newSchedule.title || !this.newSchedule.time) {
        uni.showToast({ title: '请填写标题和时间', icon: 'none' });
        return;
      }
      
      // 获取选择的日期分类
      let dateKey = this.dateOptions[this.dateIndex].toLowerCase();
      if (dateKey === '今天') dateKey = 'today';
      if (dateKey === '明天') dateKey = 'tomorrow';
      if (dateKey === '本周') dateKey = 'week';
      if (dateKey === '本月') dateKey = 'month';
      
      // 添加到对应的日程列表
      this.schedules[dateKey].push({ ...this.newSchedule });
      
      // 关闭弹窗
      this.closeAddModal();
      
      // 显示成功提示
      uni.showToast({ title: '日程添加成功', icon: 'success' });
      
      // 切换到添加的日程所在标签
      this.switchTab(dateKey);
    },
    
    // 打开日程详情
    openEventDetail(event) {
      uni.showModal({
        title: event.title,
        content: `时间：${event.time}\n地点：${event.location}\n状态：${event.status === 'completed' ? '已完成' : '即将开始'}`,
        showCancel: false
      });
    },
    
    // 底部导航栏方法
    openIndex() {
      uni.redirectTo({ url: '/pages/demo/index' });
    },
    
    openNotes() {
      uni.redirectTo({ url: '/pages/demo/notes' });
    },
    
    navigateToProfile() {
      uni.redirectTo({ url: '/pages/demo/profile' });
    }
  }
};
</script>

<style scoped>
.schedule-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
}

/* 为内容区域添加底部内边距，防止被导航栏遮挡 */
.content {
  padding-bottom: 140rpx !important;
}

/* 底部导航样式 */
.footer-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-top: 1rpx solid #eeeeee;
  /* 固定在底部并适配不同设备 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  color: #999999;
}

.nav-item.active {
  color: #07c160;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-size: 24rpx;
}

/* 原有样式 */
.test{
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #07c160;
  color: white;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
}

.action-btn {
  padding: 10rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
}

.action-text {
  font-size: 28rpx;
  color: white;
}

.content {
  padding: 20rpx;
}

.category-tabs {
  display: flex;
  background-color: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.tab {
  flex: 1;
  padding: 20rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.tab.active {
  background-color: #07c160;
  color: white;
}

.schedule-list {
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
}

.empty-state {
  padding: 100rpx 0;
  text-align: center;
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.event-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.event-item:last-child {
  border-bottom: none;
}

.event-time {
  width: 100rpx;
  text-align: center;
}

.event-hour {
  font-size: 26rpx;
  color: #666;
}

.event-content {
  flex: 1;
  margin: 0 30rpx;
}

.event-title {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.event-location {
  font-size: 26rpx;
  color: #999;
}

.event-status {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-status.upcoming {
  background-color: #07c160;
}

.event-status.completed {
  background-color: #ccc;
}

.status-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: white;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.date-picker {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  padding: 20rpx 0;
  font-size: 32rpx;
  border: none;
  background-color: transparent;
}

.btn-cancel {
  color: #666;
  border-right: 1rpx solid #eee;
}

.btn-confirm {
  color: #07c160;
}
</style>